<template>
  <div class="classify-container">
    <div class="header">
      <van-nav-bar title="分类" />
    </div>
    <van-search
      class="header"
      v-model="goodname"
      show-action
      placeholder="请输入商品名"
    >
      <template #action>
        <div @click="serch()">搜索</div>
      </template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item
        @change="Onchange"
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item @change="Onpai" v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div class="content img-list">
      <div
        style="display: inline-block; padding-left: 40px"
        v-for="(item, index) in goodlist"
        :key="index"
        @click="tage(item)"
        class="content-item"
      >
        <img
          :src="item.picUrl"
          style="height: 140px; margin-top: 10px"
          alt=""
        />
        <br /><span style="margin-top: 5px; font-size: 13px">{{
          item.name
        }}</span>
        <div style="justify-content: space-between">
          <span style="color: red; font-size: 15px">{{
            "￥" + item.price
          }}</span>
          <span style="margin-left: 25px; font-size: 12px; color: gray">{{
            item.desc
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
export default {
  name: "ShoppingAdminMoblieClassify",

  data() {
    return {
      a: [],
      goodname: "",
      indexList: [],
      indexList2: [],
      indexList3: [],
      indexList4: [],
      indexList5: [],
      goodlist: [],
      value1: 0,
      value2: "a",
      option1: [
        { text: " 全部商品", value: 0 },
        { text: "爱情鲜花", value: 1 },
        { text: "礼品花篮", value: 2 },
        { text: "办公家用绿植", value: 3 },
        { text: "纪念蛋糕", value: 4 },
        { text: "精品礼盒", value: 5 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "降序排列", value: "b" },
        { text: "升序排列", value: "c" },
      ],
      currentIndex: 0,
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    Pages(path) {
      if (this.$route.path === path) {
        return;
      }
      this.$router.push({
        path: path,
      });
    },
    getData() {
      axios({
        url: "http://127.0.0.1:3000/index/list/huashu",
        method: "get",
      }).then((res) => {
        this.indexList = res.data;
        this.goodlist = this.indexList;
      });
      axios({
        url: "http://127.0.0.1:3000/index/list/lihe",
        method: "get",
      }).then((res) => {
        this.indexList2 = res.data;
        this.goodlist.unshift(...this.indexList2);
      });
      axios({
        url: "http://127.0.0.1:3000/index/list/dangao",
        method: "get",
      }).then((res) => {
        this.indexList3 = res.data;
        this.goodlist.unshift(...this.indexList3);
      });
      axios({
        url: "http://127.0.0.1:3000/index/list/hualan",
        method: "get",
      }).then((res) => {
        this.indexList4 = res.data;
        this.goodlist.unshift(...this.indexList4);
      });
      axios({
        url: "http://127.0.0.1:3000/index/list/lvzhi",
        method: "get",
      }).then((res) => {
        this.indexList5 = res.data;
        this.goodlist.unshift(...this.indexList5);
        this.a = this.goodlist;
      });
    },
    serch() {
      let name = this.goodname;
      if (name !== "") {
        this.goodlist = this.indexList.filter((item) => {
          if (item.name === name) {
            return item;
          }
        });
      } else {
        return (this.goodlist = this.a);
      }

      console.log(this.goodlist);
    },
    Onchange() {
      console.log(this.value1);
      var a = this.value1;
      this.goodlist = this.indexList.filter((item) => {
        if (a === 0) {
          if (item.id > 0) {
            return item;
          }
        } else if (a === 1) {
          if (item.title === "花束") {
            return item;
          }
        } else if (a === 2) {
          if (item.title === "花篮") {
            return item;
          }
        } else if (a === 3) {
          if (item.title === "绿植") {
            return item;
          }
        } else if (a === 4) {
          if (item.title === "蛋糕") {
            return item;
          }
        } else if (a === 5) {
          if (item.title === "礼盒") {
            return item;
          }
        }
      });
    },
    Onpai() {
      console.log(this.value2);
      if (this.value2 === "b") {
        for (var i = 0; i < this.goodlist.length; i++) {
          for (var k = 0; k < this.goodlist.length - 1; k++) {
            if (this.goodlist[k].price < this.goodlist[k + 1].price) {
              var a = this.goodlist[k];
              this.goodlist[k] = this.goodlist[k + 1];
              this.goodlist[k + 1] = a;
            }
          }
        }
      } else if (this.value2 === "c") {
        for (var i = 0; i < this.goodlist.length; i++) {
          for (var k = 0; k < this.goodlist.length - 1; k++) {
            if (this.goodlist[k].price > this.goodlist[k + 1].price) {
              var a = this.goodlist[k];
              this.goodlist[k] = this.goodlist[k + 1];
              this.goodlist[k + 1] = a;
            }
          }
        }
      }

      console.log(this.goodlist);
      return this.goodlist;
    },
    tage(item) {
      this.$router.push({
        path: "/infoDetail",
        query: {
          ...item,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
}
.classify-container {
  background: #f2f2f2;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;

  .classify-content {
    display: flex;
    width: 100%;
    height: 100%;

    .classify-aside {
      position: relative;
      width: 120px;
      height: 100%;

      .sign-btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 50px;
        background: #e4393c;
        transition: 0.2s linear;
      }
      .classify-aside-item {
        width: 100%;
        height: 50px;
        padding-left: 15px;
        line-height: 50px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
      }
    }

    .classify-main {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      flex: 1;
      height: 100%;

      .classify-main-item {
        width: 50%;
        height: 140px;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        // border-bottom: 1px solid #ddd;
      }
    }
  }
}
.list-container {
  background: #fafafa;

  .header {
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
  }
  .img-list {
    flex-wrap: wrap;
    img {
      height: 150px;
      width: 180px;
    }
  }
  .content {
    display: flex;
    width: 100%;
    .content-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 200px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
</style>